<!--  -->
<template>
  <div class="box">
    <!-- <el-button @click="websocketonsend">send</el-button>
    <el-button @click="websocketclose">close</el-button> -->
    <el-table v-loading="loading" :data="userList">
      <el-table-column label="任务名称" align="center" prop="name" />
      <el-table-column label="成功总次数" align="completeExecuteTotal" prop="name" />
      <el-table-column label="成功插入" align="center" prop="successInsertTotal" />
      <el-table-column label="成功更新" align="center" prop="successUpdateTotal" />
      <el-table-column label="成功删除" align="center" prop="successDeleteTotal" />
      <el-table-column label="逻辑处理失败" align="center" prop="errorLogicTotal" />
      <el-table-column label="插入失败" align="center" prop="errorAddTotal" />
      <el-table-column label="平均耗时" align="center" prop="params.avgTime" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="websocketonsend"
    />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth' // get token from cookie
import { pushTaskToWeb } from '@/api/task/info'
export default {
  name: 'Index',
  data() {
    return {
      value: '后端的同学您好！我开始像你发起请求了！',
      wsUri: null,
      isWebSocket: false, // 判断是否链接成功！
      resData: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 数据源管理表格数据
      infoList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 用户表格数据
      userList: [],
      time: null
    }
  },
  created() {
    this.wsUri = `ws://10.106.34.22:9300/taskSocket/${getToken()}`
    console.log(this.wsUri)
    this.initWebSocket()
    console.log('您请求的链接id:')
    this.time = setInterval(() => {
      pushTaskToWeb(getToken())
    }, 5000)
  },
  destroyed() {
    clearInterval(this.time)// 停止
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() { // 初始化weosocket
      this.websock = new WebSocket(this.wsUri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
    },
    websocketonopen() { // 连接建立之后执行send方法发送数据
      this.isWebSocket = true
      console.log('链接成功！', this.isWebSocket)
      this.websocketonsend()
    },
    websocketonsend() { // 执行send方法发送数据
      const data = this.queryParams
      this.websock.send(JSON.stringify(data))
      console.log('发送数据')
    },
    websocketonerror() { // 连接建立失败重连
      this.$message.info('重新建立链接中')
      this.initWebSocket()
    },
    websocketonmessage(e) { // 数据接收
      if (e.data !== '连接成功') {
        this.userList = []
        this.loading = false
        const data = JSON.parse(e.data)
        this.total = data.total
        data.rows.forEach(element => {
          this.userList.push(element)
        })
        console.log('redata', JSON.parse(e.data))
      }
    },
    websocketclose(e) { // 关闭
      this.isWebSocket = false
      this.websock.close()
      console.log('断开连接', e)
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
